<template>
  <div>
    <div id="home">
      <div class="operator_head">
        <div
          id="header"
          class="operatorHeader clearfix"
          style="background: gray"
        >
          <div class="w15 fl text-center">
            <div class="logo"></div>
          </div>
          <div class="w70 fl text-left">
            <h3 class="m120px">摄影小程序后台管理</h3>
          </div>
          <div class="w15 fl text-right">
            <div class="userInfo">
              <div class="userAvatar"></div>
              <div class="userName">
                <!-- <span class="fz16px">lqq </span> -->
                <!-- <i class="el-icon-arrow-down"></i> -->
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    lqq {{ showUsername
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu
                    slot="dropdown"
                    style="width: 150px; text-align: center"
                  >
                    <el-dropdown-item icon="el-icon-s-custom"
                      >首页门户</el-dropdown-item
                    >
                    <el-dropdown-item
                      icon="el-icon-switch-button"
                      @click="signout()"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>

              <div class="skinPeeler">
                <i class="skinLogo"></i>
                <ul class="skinPeelerList">
                  <li class="skinPeelerItem">
                    <span>默认主题</span>
                  </li>
                  <li class="skinPeelerItem">
                    <span>默认主题</span>
                  </li>
                  <li class="skinPeelerItem">
                    <span>默认主题</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出对话框 -->
    <el-dialog
      style="text-align:left;"
      title="添加轮播图"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button style="width:80px;height:30px" type="primary"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item style="margin-bottom:20px" label="标题">
          <el-input></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom:20px" label="描述">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="count"
            @change="handleChange"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button style="width:60px;height:30px" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button
          style="width:60px;height:30px"
          type="primary"
          @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 侧边栏 -->
    <el-tabs :tab-position="tabPosition" style="margin: 120px 0 0 10px">
      <el-tab-pane label="首页内容">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="轮播图" name="first">
            <el-button
              class="fl"
              style="height: 40px; width: 80px;"
              type="primary"
              @click="dialogVisible = true"
              >添加</el-button
            >
          </el-tab-pane>
          <el-tab-pane label="环境展示" name="second">环境展示</el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="订单管理">
        <div class="fl">
          <el-input
            style="width: 300px; margin-right:10px"
            placeholder="请输入标题"
            prefix-icon="el-icon-search"
          >
          </el-input>

          <el-select
            style="margin-right:10px;"
            v-model="value"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin-right:10px"
            v-model="value"
            filterable
            placeholder="请选择"
          >
            <el-option
              style="padding-left:20px"
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              style="padding-left:20px"
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
            style="height: 40px; width: 80px; margin-left: 15px"
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >
          <el-button
            style="height: 40px; width: 80px;margin-right:100px"
            type="primary"
            plain
            icon="el-icon-delete"
            >清空</el-button
          >
          <el-button
            style="height: 40px; width: 80px;"
            type="primary"
            @click="dialogVisible = true"
            >添加</el-button
          >
        </div>
        <el-table :data="tableData2" style="width: 100%" max-height="250">
          <el-table-column fixed prop="num" label="序号" width="100">
          </el-table-column>
          <el-table-column fixed prop="picture" label="图片" width="150">
          </el-table-column>
          <el-table-column prop="orderNum" label="单号" width="150">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="120">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100">
          </el-table-column>
          <el-table-column prop="reserve" label="已预订" width="100">
          </el-table-column>
          <el-table-column prop="quota" label="名额" width="100">
          </el-table-column>
          <el-table-column prop="series" label="系列" width="120">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="100">
          </el-table-column>
          <el-table-column prop="time" label="创建时间" width="140">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <el-button style="width:80px;height:30px" type="primary">
              今日推荐
            </el-button>
            <el-button style="width:60px;height:30px" type="primary">
              编辑
            </el-button>

            <el-button style="width:60px;height:30px" type="danger">
              移除
            </el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="客户预约">客户预约</el-tab-pane>
      <el-tab-pane label="用户管理">
        <div class="fl">
          <el-input
            style="width: 300px"
            placeholder="请输入手机号或姓名"
            prefix-icon="el-icon-search"
          >
          </el-input>
          <el-button
            style="height: 40px; width: 80px; margin-left: 15px"
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >
          <el-button
            style="height: 40px; width: 80px"
            type="primary"
            plain
            icon="el-icon-delete"
            >清空</el-button
          >
        </div>
        <el-table :data="tableData">
          <el-table-column prop="num" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="140">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="140">
          </el-table-column>
          <el-table-column prop="identity" label="身份" width="140">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="140">
          </el-table-column>
          <el-table-column prop="date" label="注册日期" width="140">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页器 -->
    <div class="text-right mt20px">
      <div class="block">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20, 25, 30]"
          :page-size="30"
          layout="total, sizes, prev, pager, next, jumper"
          :total="30"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    const item = {
      num: "1",
      name: "王小虎",
      phone: "110",
      sex: "男",
      identity: "管理员",
      email: "123@qq.com",
      address: "上海市普陀区金沙江路 1518 弄",
      date: "2016-05-02"
    };
    return {
      tabPosition: "left",
      tableData: Array(5).fill(item),
      dialogVisible: false,
      count: 1,
      tableData2: [
        {
          num: "1",
          time: "2016-05-02"
        }
      ],
      options1: [
        {
          value: "选项1",
          label: "全部"
        },
        {
          value: "选项2",
          label: "礼服"
        },
        {
          value: "选项3",
          label: "妆容"
        },
        {
          value: "选项1",
          label: "摄影"
        }
      ],
      options2: [
        {
          value: "选项1",
          label: "全部"
        },
        {
          value: "选项2",
          label: "婚纱定制"
        },
        {
          value: "选项3",
          label: "主题拍摄"
        }
      ],
      options3: [
        {
          value: "选项1",
          label: "全部"
        },
        {
          value: "选项2",
          label: "今日推荐"
        },
        {
          value: "选项3",
          label: "热门推荐"
        }
      ]
    };
  },
  methods: {
    signout() {
      //清空sessionStorage
      window.sessionStorage.clear();
      this.$router.push("/login");
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>

<style scoped>
@import "homePage.css";
</style>
